<template>
    <div class="login">
        <el-form ref="loginForm" :rules="rules" :model="loginForm">

            <h3>系统登陆</h3>
            <el-form-item prop="username">
                <el-input type="text" auto-comlete="false" v-model="loginForm.username" placeholder="输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" auto-comlete="false" v-model="loginForm.password" placeholder="输入密码"></el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-input type="text" auto-comlete="false" v-model="loginForm.code" placeholder="输入密码"></el-input>
            </el-form-item>
            <img :src="captchaUrl"/>
            <el-checkbox v-model="checked">记住我</el-checkbox>
            <el-button type="primary" @click="submit">提交</el-button>
        </el-form>
    </div>
</template>
<script>

export default ({
   name:'Login',
   data(){
       return {
           captchaUrl:'',
           loginForm:{
               username:'用户名',
               password:'',
               code:''
           },
           checked:true,
           rules:{
               username:[{required:true,message:'不能为空',trigger:'blur'}],
               password:[{required:true,message:'不能为空',trigger:'blur'}],
               code:[{required:true,message:'不能为空',trigger:'blur'}],
           }
       }
   },
    methods:{
        submit(){
            this.$refs.loginForm.validate((valid) => {
                //找到对应表单的名字 进行信息校验
                if(valid){
                   // postRequest
                   // alert('提交成功'){
                    //console.log(baseAjax.postRequest())
                   this.$router.replace('/home');
                }else{
                    this.$message.error('请输入所有字段');
                    return false;
                }
            })
        }
    }
})
</script>
<style scoped>
.login{
    width:60%;
    border:2px solid #000;
}
</style>
